<!--
 * @Author: liangzhuo liangzhuo@chzu.com
 * @Date: 2022-10-25 19:08:01
 * @LastEditors: liangzhuo liangzhuo@chzu.com
 * @LastEditTime: 2022-10-30 15:20:12
 * @FilePath: \hongxinUi\src\views\exam\historyPaper\index.vue
 * @Description: 历史试卷
-->
<template>
  <div>
    <!-- 头部输入框 -->
    <el-form class="top_input"  style="margin: 10px 10px;" :model="queryParams" size="small" :inline="true">
      <el-form-item label="题干内容">
        <el-input
          v-model="queryParams.paperName"
          placeholder="请输入题干内容"
          size="small"
          style="width: 240px"
        ></el-input>
      </el-form-item>
      <el-form-item label="试卷开始-截止时间">
        <el-date-picker
          v-model="time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="handleRefresh"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!--表格-->
    <el-table :data="paperInfoList" border style="width: 100%;"
     v-loading="loading" ref="multipleTable">
      <el-table-column prop="paperName" label="试卷名" width="500" />
      <el-table-column prop="inputCount" label="填空题个数" width="100" />
      <el-table-column prop="judgeCount" label="判断题个数" width="100" />
      <el-table-column prop="schooseCount" label="单选题个数" width="100" />
      <el-table-column prop="mchooseCount" label="多选题个数" width="100" />
      <el-table-column prop="paperTime" label="开始时间" width="160" />
      <el-table-column prop="paperEndTime" label="结束时间" width="160" />
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-receiving"
            @click="handlePaperDetails(scope.row)"
            >试卷详情</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-pie-chart"
            @click="handleScoreDetails(scope.row)"
            >考试详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <pagination
      style="margin-bottom: 30px;"
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="handleQuery"
    />

    <!-- 试卷详情的对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="isOpenDialogPaper"
      width="100%"
      :before-close="handleClose"
    >
      <!--填空题-->
      <span class="common_font">填空题</span>
      <ul class="input_ul">
        <li v-for="(item, index) in examInputs" :key="index">
          <span class="common_font">{{index + 1}}、</span> &nbsp;
          {{item.questionText}}
        </li>
      </ul>
      <!--判断题-->
      <span class="common_font">判断题</span>
      <ul class="input_ul">
        <li v-for="(item, index) in examJudges" :key="index">
          <span class="common_font">{{examInputs.length + index + 1}}、</span> &nbsp;
          {{item.questionText}}  &nbsp;  &nbsp; ( &nbsp; )
        </li>
      </ul>
      <!--单选题-->
      <span class="common_font">单选题</span>
      <ul class="Schooses_ul">
        <li v-for="(item, index) in examSchooses" :key="index">
          <span class="common_font">{{examInputs.length + examJudges.length + index + 1}}、</span> &nbsp;
          {{item.questionText}}
          <br/>
          <div>
            <span v-show="item.chooseA">A、{{item.chooseA}}</span>
            <span v-show="item.chooseB">B、{{item.chooseB}}</span>
            <span v-show="item.chooseC">C、{{item.chooseC}}</span>
            <span v-show="item.chooseD">D、{{item.chooseD}}</span>
          </div>
        </li>
      </ul>
      <!--多选题-->
      <span class="common_font">多选题</span>
      <ul class="Schooses_ul">
        <li v-for="(item, index) in examMchooses" :key="index">
          <span class="common_font">{{examInputs.length + examJudges.length + examSchooses.length + index + 1}}、</span> &nbsp;
          {{item.questionText}}
          <br/>
          <div>
            <span v-show="item.chooseA">A、{{item.chooseA}}</span>
            <span v-show="item.chooseB">B、{{item.chooseB}}</span>
            <span v-show="item.chooseC">C、{{item.chooseC}}</span>
            <span v-show="item.chooseD">D、{{item.chooseD}}</span>
            <span v-show="item.chooseE">E、{{item.chooseE}}</span>
            <span v-show="item.chooseF">F、{{item.chooseF}}</span>
            <span v-show="item.chooseG">G、{{item.chooseG}}</span>
            <span v-show="item.chooseH">H、{{item.chooseH}}</span>
            <span v-show="item.chooseI">I、{{item.chooseI}}</span>
          </div>
        </li>
      </ul>
      <!-- 确定与取消 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogCancel">取 消</el-button>
      </span>
    </el-dialog>

  <!---->
  <el-dialog
      :title="dialogTitle"
      :visible.sync="isOpenDialogScore"
      width="65%"
      :before-close="handleClose"
    >
    <!--试题表格开始-->
    <el-table :data="scoreInfoList" border style="width: 100%;" ref="multipleTable">
      <el-table-column prop="realName" label="姓名" width="100" />
      <el-table-column prop="score" label="分数" width="100" />
      <el-table-column prop="studentId" label="学号" width="200" />
      <el-table-column prop="studentGrade" label="年级" width="100" />
      <el-table-column prop="studentClass" label="班级" width="100" />
      <el-table-column prop="startTime" label="开始答题时间" width="160" />
      <el-table-column prop="endTime" label="结束答题时间" width="160" />
    </el-table>

      <!-- 确定与取消 -->
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogCancel">取 消</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
import {getExamPapaer, getQuestionInfo, getScoreInfo} from '@/api/exam/paperInfo'
import {formatDate} from '@/utils/dateUtil'
export default {
  name: 'HongxinUiIndex',

  data() {
    return {
      loading: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        questionText: undefined
      },
      time: undefined,
      total: 0,
      paperInfoList: [],
      scoreInfoList: [],
      isOpenDialogPaper: false,
      isOpenDialogScore: false,
      dialogTitle: '',
      examInputs: [],
      examJudges: [],
      examMchooses: [],
      examSchooses: [],
      count: 0,
    };
  },

  created() {
    this.handleQuery()
  },
  
  mounted() {
    
  },

  methods: {
    // 获取历史试卷信息
    handleQuery() {
      if (this.time != undefined && this.time != null) {
        this.queryParams.paperTime = formatDate(this.time[0], "yyyy-MM-dd hh:mm:ss")
        this.queryParams.paperEndTime = formatDate(this.time[1], "yyyy-MM-dd hh:mm:ss")
      }
      getExamPapaer(this.queryParams).then(res => {
        this.paperInfoList = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    // 重置
    handleRefresh() {
      this.queryParams = {}
    },
    // 试卷详情数据
    handlePaperDetails(val) {
      this.dialogTitle = '试题信息'
      this.isOpenDialogPaper = true
      getQuestionInfo(val.id).then(res => {
        this.examInputs = res.data.examInputs
        this.examJudges = res.data.examJudges
        this.examMchooses = res.data.examMchooses
        this.examSchooses =res.data.examSchooses
      })
    },
    // 
    handleScoreDetails(val) {
      this.dialogTitle = '考试成绩'
      this.isOpenDialogScore = true
      getScoreInfo(val.id).then(res => {
        this.scoreInfoList = res.data
      })
    },
    // 弹出框逻辑操作
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.handleQuery();
          done();
        })
        .catch((_) => {});
    },
    // 弹出框关闭
    dialogCancel() {
      this.isOpenDialogPaper = false;
      this.isOpenDialogScore = false;
      this.handleQuery();
    },
  },
};
</script>

<style lang="scss" scoped>
.common_font {
  font-weight: bold;
  font-size: 15px;
}
.input_ul li{
  line-height: 50px;
  list-style-type: none;
}
.Schooses_ul li{
  line-height: 50px;
  list-style-type: none;
}
.Schooses_ul li div span{
  margin: 0 20px;
}

</style>